<template>
    <div>
        <el-form :inline="true">
            <el-form-item label="订单编码">
                <el-input v-model="orderNo" placeholder="请输入订单编码"></el-input>
            </el-form-item>

            <el-form-item label="订单名称">
                <el-input v-model="orderName" placeholder="请输入订单名称"></el-input>
            </el-form-item>

            <el-form-item label="订单状态">
                <el-select v-model="orderStatus" placeholder="请选择订单状态">
                    <el-option label="全部" value=""></el-option>
                    <el-option label="待付款" value="1"></el-option>
                    <el-option label="待发货" value="2"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="客户编码">
                <el-input v-model="customercode" placeholder="请输入客户编码"></el-input>
            </el-form-item>

            <el-form-item label="客户PO号">
                <el-input v-model="customerpo" placeholder="请输入客户PO号"></el-input>
            </el-form-item>

            <el-form-item label="客户名称">
                <el-input v-model="customername" placeholder="请输入客户名称"></el-input>
            </el-form-item>

            <el-form-item label="订货日期">
                <el-date-picker v-model="orderDate" type="date" placeholder="选择日期"></el-date-picker>
            </el-form-item>

            <el-form-item label="交货日期">
                <el-date-picker v-model="deliveryDate" type="date" placeholder="选择日期"></el-date-picker>
            </el-form-item>

            <el-form-item label="货别">
                <el-select v-model="orderType" placeholder="请选择货别">
                    <el-option label="全部" value=""></el-option>
                    <el-option label="标准货" value="1"></el-option>
                    <el-option label="特种货" value="2"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="结账方式">
                <el-select v-model="settleType" placeholder="请选择结账方式">
                    <el-option label="全部" value=""></el-option>
                    <el-option label="现金" value="1"></el-option>
                    <el-option label="银行转账" value="2"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="订单类别">
                <el-select v-model="orderCategory" placeholder="请选择订单类别">
                    <el-option label="全部" value=""></el-option>
                    <el-option label="客户订单" value="1"></el-option>
                    <el-option label="备货订单" value="2"></el-option>
                    <el-option label="退货订单" value="3"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="跟单">
                <el-input v-model="followUp" placeholder="请输入跟单"></el-input>
            </el-form-item>

            <el-form-item label="业务员">
                <el-input v-model="saleman" placeholder="请输入业务员"></el-input>
            </el-form-item>

            <el-form-item label="质量要求">
                <el-input v-model="quality" placeholder="请输入质量要求"></el-input>
            </el-form-item>

            <el-button type="primary" @click="search" style="margin-bottom: 20px;">
                <el-icon style="margin-right: 10px;">
                    <Search />
                </el-icon>搜索
            </el-button>
        </el-form>

        <el-button type="primary" v-perm:management:salesorder:insert @click="insert">添加</el-button>
        <el-button type="primary" v-perm:management:salesorder:update @click="update">修改</el-button>
        <el-button type="primary" v-perm:management:salesorder:remove @click="remove">删除</el-button>
        <el-button type="primary" @click="bulkDelete" :disabled="selectedRows.length === 0">批量删除</el-button>

        <el-table :data="salesorder" style="width: 100%" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="50"></el-table-column>
            <el-table-column prop="orderNo" label="订单编码" width="120"></el-table-column>
            <el-table-column prop="orderName" label="订单名称" width="120"></el-table-column>
            <el-table-column prop="orderStatus" label="订单状态" width="120"></el-table-column>
            <el-table-column prop="customercode" label="客户编码" width="120"></el-table-column>
            <el-table-column prop="customerpo" label="客户PO号" width="120"></el-table-column>
            <el-table-column prop="customername" label="客户名称" width="120"></el-table-column>
            <el-table-column prop="orderDate" label="订货日期" width="120"></el-table-column>
            <el-table-column prop="deliveryDate" label="交货日期" width="120"></el-table-column>
            <el-table-column prop="orderType" label="货别" width="120"></el-table-column>
            <el-table-column prop="settleType" label="结账方式" width="120"></el-table-column>
            <el-table-column prop="orderCategory" label="订单类别" width="120"></el-table-column>
            <el-table-column prop="followUp" label="跟单" width="120"></el-table-column>
            <el-table-column prop="saleman" label="业务员" width="120"></el-table-column>
            <el-table-column prop="quality" label="质量要求" width="120"></el-table-column>
            <el-table-column label="操作" width="200px">
                <template #default="scope">
                    <el-button :row="scope.row" type="primary"
                        v-perm:management:salesorder:update @click="update(scope.row)">修改</el-button>
                    <el-button type="danger" size="mini" :row="scope.row" v-perm:management:salesorder:remove
                        @click="deleteSingle(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-dialog :destroy-on-close="true" :title="title" v-model="visible" style="width: 1250px;">
            <router-view :data="data" @close="close"></router-view>
        </el-dialog>
    </div>
</template>

<script>
import { ref } from 'vue';
import router from '@/router';

let data = ref({});
let visible = ref(false);
let title = ref('');

// 方法：添加
const insert = () => {
    visible.value = true;
    title.value = '添加订单';
    router.push('/path_to_your_add_order'); // 替换为实际路径
};

// 方法：修改
const update = (order) => {
    visible.value = true;
    title.value = '修改订单';
    // 通过路由将选中订单的详细信息传递
    router.push(`/path_to_your_edit_order/${order.orderNo}`); // 替换为实际路径
};

// 初始化状态（设置默认值）
const orderNo = ref('');
const orderName = ref('');
const orderStatus = ref('');
const customercode = ref('');
const customerpo = ref('');
const customername = ref('');
const orderDate = ref('');
const deliveryDate = ref('');
const orderType = ref('');
const settleType = ref('');
const orderCategory = ref('');
const followUp = ref('');
const saleman = ref('');
const quality = ref('');

// 示例订单数据
let salesorder = ref([
    {
        orderNo: "123456",
        orderName: "测试订单1",
        orderStatus: "待付款",
        customercode: "123456",
        customerpo: "123456",
        customername: "测试客户1",
        orderDate: "2022-01-01",
        deliveryDate: "2022-01-02",
        orderType: "标准货",
        settleType: "现金",
        orderCategory: "客户订单订单",
        followUp: "无",
        saleman: "张三",
        quality: "无"
    },
    {
        orderNo: "654321",
        orderName: "测试订单2",
        orderStatus: "待发货",
        customercode: "654321",
        customerpo: "654321",
        customername: "测试客户2",
        orderDate: "2022-01-03",
        deliveryDate: "2022-01-04",
        orderType: "特种货",
        settleType: "银行转账",
        orderCategory: "备货订单",
        followUp: "无",
        quality: "无"
    }
]);

let selectedRows = ref([]);

const handleSelectionChange = (val) => {
    selectedRows.value = val;
};

const bulkDelete = () => {
    if (confirm("确定要删除选中的订单吗？")) {
        salesorder.value = salesorder.value.filter(order => !selectedRows.value.includes(order));
        selectedRows.value = []; // 清空选中项
    }
};

// 单行删除方法
const deleteSingle = (row) => {
    if (confirm("确定要删除该订单吗？")) {
        salesorder.value = salesorder.value.filter(order => order.orderNo !== row.orderNo);
    }
};

export default {
    setup() {
        return {
            data,
            visible,
            title,
            insert,
            update,
            salesorder,
            selectedRows,
            handleSelectionChange,
            bulkDelete,
            deleteSingle
        };
    }
};
</script>

<style scoped>
.el-select {
    width: 150px;
}
</style>
